import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'

import { ContentHeader } from '../../wrapper'
import { actions } from '../action/action'
import { passwordItems } from '../static/index'
import FormGroup from '../../common/form'

class Content extends Component {
    submit() {
        const { oldPassword, newPassword, newPasswordRepeat, errors, submitPassword } = this.props;

        submitPassword({
            oldPassword: oldPassword,
            newPassword: newPassword,
            newPasswordRepeat: newPasswordRepeat
        })
    }
    render() {
        const props = this.props;
        const { errors, validate } = props;

        return <div className="content" style={{ paddingBottom: 0 }}>
            <section className="content-header">
                <h1>个人信息</h1>
            </section>
            <div style={{ minHeight: 500, padding: '45px 0 10px' }}>

                <form className="box-body form-horizontal">
                    {passwordItems.map((i) => <FormGroup
                        key={i.id}
                        options={i}
                        data={props[i.id]}
                        error={errors.filter((j) => j.target == i.id)}
                        callback={(e) => props[i.callback](e)}
                        onKeyUp={() => validate({
                            [i.id]: props[i.id],
                            [i.relate]: props[i.relate]
                        })}
                        onBlur={() => validate({
                            [i.id]: props[i.id],
                            [i.relate]: props[i.relate]
                        })}
                    />)}
                </form>
            </div>
            <div className="box-footer profile-footer">
                <button className="btn btn-primary pull-right" onClick={() => this.submit()}>保存密码</button>
            </div>
        </div>
    }
}


const _Content = connect(
    (state) => {
        return {
            oldPassword: state.oldPassword,
            newPassword: state.newPassword,
            newPasswordRepeat: state.newPasswordRepeat,
            errors: state.errors
        }
    },
    (dispatch) => {
        return {
            changeOldPassword: (e) => actions.changeOldPassword(dispatch, e),
            changeNewPassword: (e) => actions.changeNewPassword(dispatch, e),
            changeNewPasswordRepeat: (e) => actions.changeNewPasswordRepeat(dispatch, e),
            submitPassword: (data) => actions.submitPassword(dispatch, data),
            validate: (data) => actions.validate(data, dispatch)
        }
    }
)(Content);

export default _Content